<template>
	<view>
    <!-- 搜索框 -->
    <view @click="toSearch()">
      <my-search></my-search>
    </view>
    <!-- 分类区域 -->
		<van-tree-select
		  :items="items"
		  height="1200rpx"
		  :main-active-index="mainActiveIndex"
		  @click-nav="onClickNav($event)"
		>
      <view v-for="item in catelist[mainActiveIndex].children" slot="content">
        <!-- 二级标题 -->
        <view class="item2_title"><span>/{{item.cat_name}}/</span></view>
        <!-- 三级标题区域 -->
        <van-grid column-num="3" :border="false">
          <van-grid-item use-slot v-for="(item2,index) in item.children" :key="index">
            <view class="item">
              <view>
                <navigator :url="'/subpkg/goods_list/goods_list?cat_id:'+item2.cat_id">
                  <image
                    :src="item2.cat_icon.replace('api-ugo-dev','api-ugo-web')"/>
                </navigator>
              </view>
              <view class="item3_title">{{ item2.cat_name }}</view>
            </view>
          </van-grid-item>
        </van-grid>
      </view>
		</van-tree-select>
	</view>
</template>

<script>
	export default {
    onLoad(){
      const sysInfo = uni.getSystemInfoSync()
      // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 -        自定义的search组件高度
       this.wh = sysInfo.windowHeight - 50
    },
		data() {
			return {
        // 分类数据
				catelist:[],
        // 一级分类列表
        items:[],
        // 二级分类列表
        item2:[],
        // 三级分类列表
        item3:[],
        // 右边选中选项
         mainActiveIndex: 0
			};
		}, 
    methods:{
      // 请求分类数据
      async getCateList(){
        const {data:res} = await uni.$http.get('/api/public/v1/categories')
        if(res.meta.status!==200) return uni.$showMsg()
        this.catelist=res.message
        console.log(this.catelist)
        res.message.forEach(item=>{
          const obj={dot:false}
          obj.text=item.cat_name
          this.items.push(obj)
          item.children.forEach(item2=>{
            this.item2.push(item2)
            if(item2.children){
              item2.children.forEach(item3=>{
                this.item3.push(item3)
              })
            }
          })
        })
        console.log(this.items)
        console.log(this.item2)
        console.log(this.item3)
      },
      // 切换选项页面
      onClickNav(e) {
          this.mainActiveIndex=e.target.index
        },
      // 跳转搜索页面
      toSearch(){
        uni.navigateTo({
          url:'/subpkg/search/search'
        })
      }
    },
    onLoad(){
      this.getCateList()
    }
	}
</script>

<style>
  .item2_title{
    text-align: center;
    
  }
  image{
    width: 120rpx;
    height: 120rpx;
  }
  .item{
    display: flex;
    flex-direction: column;
  }
  .item3_title{
    text-align: center;
    font-size: 24rpx;
  }
  .van-grid-item__content {
    --grid-item-content-padding:0
  }
</style>
